<template>
    <div class="transfer-account page">
        <div class="con">
            <div class="user" v-if="user">
                <img :src="user.avatar" alt="" class="avatar">
                <span class="name">{{user.name}}（{{user.code}})</span>
            </div>

            <div class="form">
                <div class="form-con ">
                    <span class="title">充值金额</span>
                    <div class="inputs border-bottom-1px">
                        <span class="icon">￥</span>
                        <input ref="in" @keyup="changeValue" class="inp" v-model="amount" type="number">
                    </div>
                    <!--                    <span @click="showAlert" class="remark">添加转账说明</span>-->
                </div>

            </div>
            <div class="btn" @click="commit">立即充值</div>
        </div>
    </div>
</template>

<script>
    import {clearNoNum} from "../../common/js/num";
    import {showInfo} from "../../toast";
    import {info} from "../../api/user";
    import {commit} from "../../api/account";
    import {config} from "../../util/wx";
    import Wx from '@/wx'
    import * as Dialog from '@/dialog'

    export default {
        name: "account",
        created() {
            info().then(res => {
                this.user = res.data
            })
            //配置
            config()
        },
        data() {
            return {
                payConfig: null,
                user: null,
                amount:null
            }
        },
        methods: {
            changeValue() {
                this.payConfig =null//重置
                this.amount = clearNoNum(this.amount)
            },
            wxPay(){
                if (this.payConfig) {
                    Wx.pay(this.payConfig).then(res => {
                        // Dialog.showCorrect("操作成功")
                        this.$router.back()
                    })
                }
            },
            commit() {
                if (!this.amount || this.amount < 0) {
                    showInfo("输入有误!", "warn")
                } else {
                    if(this.amount>2000){
                        showInfo("最大金额2000", "warn")
                    }
                    if (this.payConfig) {
                        this.wxPay();
                    } else {
                        commit(this.amount).then(res => {
                            console.log(res.data)
                            this.payConfig = res.data
                            this.wxPay()
                        })
                    }

                }

            }
        }
    }
</script>

<style scoped lang="stylus">
    .transfer-account
        background url("~@/assets/hbg.png") no-repeat #FFFFFF
        background-size 100% auto
        z-index 2
        height 100%

        .con
            padding 0px 10px 0

        .user
            height 95px
            display flex
            justify-content center
            align-items center
            flex-direction column

            .avatar
                width 40px
                height 40px
                border-radius 5px

            .name
                margin-top 9px
                font-size: 14px;
                font-family: PingFang SC;
                color: rgba(78, 61, 7, 1);

        .form
            overflow hidden
            padding 20px 30px
            margin-top 10px
            font-size 0
            .form-con
                .title
                    font-size: 12px;
                    font-family: PingFang SC;
                    color: rgba(78, 61, 7, 1);

                .inputs
                    border-bottom-color #DCDCDC
                    height 70px
                    display flex
                    align-items center
                    margin-bottom 15px

                    .icon
                        font-size: 35px;
                        font-family: PingFang SC;
                        font-weight: 600;
                        color: rgba(78, 61, 7, 1);

                    .inp
                        outline none
                        border none
                        height 35px
                        font-size 24px

                .remark
                    font-size: 12px;
                    font-family: PingFang SC;
                    color: rgba(247, 137, 94, 1);

        .btn
            height 44px
            background: rgba(247, 137, 94, 1);
            border-radius: 7px;
            text-align center
            color white
            font-size 14px
            line-height 44px


</style>